<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 基础表格</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
                <el-select v-model="select_cate" placeholder="筛选省份" class="handle-select mr10">
                    <el-option key="1" label="广东省" value="广东省"></el-option>
                    <el-option key="2" label="湖南省" value="湖南省"></el-option>
                </el-select>
                <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
            </div>
            <template>
                    <el-table :data="data"  border class="table" ref="multipleTable" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
<!--                         <el-table-column prop="id" label="ID" width="120">
                        </el-table-column> -->
                        <el-table-column prop="nickname" label="昵称"  width="120">
                        </el-table-column>
                          <el-table-column fixed="right"
                              label="ID"
                               width="130">
                              <template slot-scope="scope">
                                <el-popover trigger="hover" placement="top">
                             <!--      <p>姓名: {{ scope.row.nickname }}</p>
                                  <p>住址: {{ scope.row.address }}</p> -->
                                   <!-- <template slot-scope="scope"> -->
                                        
                                        <el-button type="text"  size="small" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                        <el-button type="text" size="small" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" >编辑</el-button>
                                    <!-- </template> -->
                                  <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.id }}</el-tag>
                                  </div>
                                </el-popover>
                              </template>
                            </el-table-column>
                        <el-table-column prop="grade" label="等级" min-width="30">
                        </el-table-column>
                        <el-table-column prop="province" label="省份" min-width="70">
                        </el-table-column>
                        <el-table-column prop="city" label="城市" min-width="70">
                        </el-table-column>
                        <el-table-column prop="address" label="地址" :formatter="formatter"  >
                        </el-table-column>
                       
                        <el-table-column prop="createtime" label="创建日期" :formatter="formatDate" sortable width="160">
                        </el-table-column>
                        <el-table-column prop="updatetime" label="更新日期" data-key='updatetime' :formatter="formatDate" sortable width="160">
                        </el-table-column>
<!--                         <el-table-column label="操作"  min-width="130"  fixed="right" align="center" >
                            <template slot-scope="scope">
                                <el-button type="text" size="small" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button type="text"  size="small" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column> -->
                    </el-table>
            </template>
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="20">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="50px">
                <el-form-item label="日期">
                    <el-date-picker  type="datetime" placeholder="选择日期" v-model="form.createtime" value-format="yyyy-MM-dd hh:mm:ss" style="width: 100%;" :picker-options="pickerOptions1"></el-date-picker>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.nickname"></el-input>
                </el-form-item>
                <el-form-item label="等级">
                    <el-input v-model="form.grade"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'basetable',
        data() {
            return {
                url: './static/vuetable.json',
                tableData: [{address:"西藏自治区 拉萨市 曲水县",createtime:"1973-09-15",nickname:"罗明"}],
                cur_page: 1,
                multipleSelection: [],
                select_cate: '',
                select_word: '',
                del_list: [],
                is_search: false,
                editVisible: false,
                delVisible: false,
                form: {
                    nickname: '',
                    createtime: '',
                    address: ''
                },
                idx: -1,
                pickerOptions1: {
                          disabledDate(time) {
                            return time.getTime() > Date.now();
                          },
                          shortcuts: [{
                            text: '今天',
                            onClick(picker) {
                              picker.$emit('pick', new Date());
                            }
                          }, {
                            text: '昨天',
                            onClick(picker) {
                              const date = new Date();
                              date.setTime(date.getTime() - 3600 * 1000 * 24);
                              picker.$emit('pick', date);
                            }
                          }, {
                            text: '一周前',
                            onClick(picker) {
                              const date = new Date();
                              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                              picker.$emit('pick', date);
                            }
                          }]
                },
            }
        },
        created() {
            this.getData();
        },
        computed: {
            data() {
                return this.tableData.filter((d) => {
                    let is_del = false;
                    for (let i = 0; i < this.del_list.length; i++) {
                        if (d.nickname === this.del_list[i].nickname) {
                            is_del = true;
                            break;
                        }
                    }
                    if (!is_del) {
                        if (d.address.indexOf(this.select_cate) > -1 &&
                            (d.nickname.indexOf(this.select_word) > -1 ||
                                createtime.indexOf(this.select_word) > -1)
                        ) {
                            return d;
                        }
                    }
                })
            }
        },
        methods: {
            formatDate(row, column,vue,index){
                // JSON.stringify(column)
                // return JSON.stringify(row)+index;
               return this.$Time.formatDate(vue)

            },
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.getData();
            },
            // 获取 easy-mock 的模拟数据
            getData() {

                // 开发环境使用 easy-mock 数据，正式环境使用 json 文件
                if (process.env.NODE_ENV === 'development') {
                    this.url = '/ms/table/list';
                };
   // this.tableData =[{
   //      "createtime": "1997-11-11",
   //      "name": "林丽",
   //      "address": "吉林省 辽源市 龙山区"
   //  }, {
   //      "createtime": "1987-09-24",
   //      "name": "文敏",
   //      "address": "江西省 萍乡市 芦溪县"
   //  }, {
   //      "createtime": "1996-08-08",
   //      "name": "杨秀兰",
   //      "address": "黑龙江省 黑河市 五大连池市"
   //  }, {
   //      "createtime": "1978-06-18",
   //      "name": "魏强",
   //      "address": "广东省 韶关市 始兴县"
   //  }, {
   //      "createtime": "1977-07-09",
   //      "name": "石秀兰",
   //      "address": "江苏省 宿迁市 宿豫区"
   //  }, {
   //      "createtime": "1994-09-20",
   //      "name": "朱洋",
   //      "address": "海外 海外 -"
   //  }, {
   //      "createtime": "1980-01-22",
   //      "name": "傅敏",
   //      "address": "海外 海外 -"
   //  }, {
   //      "createtime": "1985-10-10",
   //      "name": "毛明",
   //      "address": "内蒙古自治区 包头市 九原区"
   //  }, {
   //      "createtime": "1975-09-08",
   //      "name": "何静",
   //      "address": "西藏自治区 阿里地区 普兰县"
   //  }, {
   //      "createtime": "1970-06-07",
   //      "name": "郭秀英",
   //      "address": "四川省 巴中市 恩阳区"
   //  }];
                 let params={}
                     this.$api.userList.list(params).then(res => {
                        this.tableData = res.data;
                      console.log(res.data)
                     })
                // console.log(this.url)
                // this.$axios.post(this.url, {
                //     page: this.cur_page
                // }).then((res) => {
                //     // console.log(res.data.list)
                //     // this.tableData = res.data.list;
                // })
            },
            search() {
                this.is_search = true;
            },
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleEdit(index, row) {

                this.idx = index;
                const item = this.tableData[index];
                this.form = {
                    nickname: item.nickname,
                    createtime: this.$Time.formatDate(item.createtime),
                    // updatetime:this.$Time.formatDate(item.updatetime),
                    address: item.address,
                    grade:item.grade
                    // updatetime:this.$Time.formatDate(item.updatetime)
                }
                this.editVisible = true;
            },
            handleDelete(index, row) {

                this.idx = index;
                this.delVisible = true;
            },
            delAll() {
                const length = this.multipleSelection.length;
                let str = '';
                this.del_list = this.del_list.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    str += this.multipleSelection[i].nickname + ' ';
                }
                this.$Message.error('删除了' + str);
                this.multipleSelection = [];
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 保存编辑
            saveEdit() {
                // this.form.createtime=this.$Time.toTimestamp(this.form.createtime)
                // alert(this.$Time.toTimestamp(this.form.createtime))
                // var form=this.form;
                //更新对象 新值 替换旧值
                var form=this.$Arr.objUpdate(this.tableData[this.idx],this.form)
                // alert(JSON.stringify(form))
                 // alert(this.tableData[this.idx])
                // this.tableData[this.idx]=this.form;
                // alert(this.$Time.toTimestamp(this.form.createtime)+JSON.stringify(this.form))
                this.$set(this.tableData, this.idx, form);
                this.editVisible = false;
                this.$Message.success(`修改第 ${this.idx+1} 行成功`);
            },
            // 确定删除
            deleteRow(){
                this.tableData.splice(this.idx, 1);
                this.$Message.success('删除成功');
                this.delVisible = false;
            }
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
</style>
